<!-- 
  基于 clipboard 模块。实现一个  v-copy 的自定义指令

    1. 使用方式
      v-copy="'张三'" 该指令所在元素点击之后复制 ’张三‘

      v-copy="name"  复制 name 数据所指向的值


  实现一个 v-auth 自定义指令

    v-auth="['admin', 'edit']"    当前用户如果角色是 admin 或者 edit ，该按钮可见，否则按钮不可见

    v-auth.dis="['admin', 'edit']"    有 dis 修饰符的时候，控制元素为 禁用

 -->

<template>
  <div>
    <h1>App</h1>

    <input v-model="name" type="text" />

    <button v-copy="'张三'">按钮1</button>
    <button v-copy="name">按钮2</button>

    <hr />

    <div v-if="userInfo">
      <h2>欢迎你，{{ userInfo.name }}</h2>
      <button @click="userInfo = null">退出登录</button>
      <ul>
        <li v-for="stu in students" :key="stu.id">
          {{ stu.id }} - {{ stu.name }} - {{ stu.age }}

          <!-- 
            删除按钮，需要 role 为 admin 或者 edit 才能看到
              方案一：直接 v-if 判断
              方案二：做一个 v-auth 的指令
           -->
          <!-- <button v-if="userInfo.role === 'admin' || userInfo.role === 'edit'">
            删除
          </button> -->

          <button v-auth.dis="['admin', 'edit']">删除</button>
        </li>
      </ul>
    </div>

    <div v-else>
      <h2>登录</h2>
      <input v-model="username" type="text" placeholder="用户名" />
      <button @click="handleLogin">登录</button>
    </div>
  </div>
</template>

<script>
import Clipboard from "clipboard";

// 写死两个账号数据
const users = [
  { id: 1, name: "admin", role: "admin" },
  { id: 2, name: "zs", role: "user" },
  { id: 3, name: "ls", role: "edit" },
];

export default {
  directives: {
    // copy: {
    //   bind(el, binding) {
    //     console.log("binding", binding);
    //     new Clipboard(el, {
    //       text() {
    //         return binding.value;
    //       },
    //     });
    //   },
    //   update(el, binding) {
    //     console.log("binding", binding);
    //     new Clipboard(el, {
    //       text() {
    //         return binding.value;
    //       },
    //     });
    //   },
    // },
    copy(el, binding) {
      new Clipboard(el, {
        text() {
          return binding.value;
        },
      });
    },

    auth: {
      inserted(el, binding) {
        console.log("binding", binding);
        // 0. 获取是否禁用
        const isDis = !!binding.modifiers["dis"];
        // 1. 获取表达式的值，也就是该按钮需要什么权限
        const roles = binding.value;
        // 2. 获取当前登录用户的 role 信息    指令中的this得到是 undefined
        //       正常来说，我们的用户信息是存放在状态管理器中的，我可以从状态管理器中去获取是没有问题的。
        //       当前这份代码用户信息直接存储在当前的组件实例上this。没法获取到
        // console.log("this", this);
        const role = window.userInfo.role;
        console.log("roles", roles);
        console.log("role", role);
        // 3. 判断当前 role 是否在 roles 中
        if (!roles.includes(role)) {
          // 没有权限，将按钮给干掉
          // el.style.display = "none"; // 改样式

          // el.remove();
          if (isDis) {
            el.disabled = true;
          } else {
            el.parentNode.removeChild(el);
          }
        }
      },
    },
  },

  data() {
    return {
      name: "李四",
      students: [
        {
          id: 1,
          name: "张三",
          age: 18,
        },
        {
          id: 2,
          name: "李四",
          age: 20,
        },
      ],

      userInfo: null, // 表示当前登录用户的信息
      username: "", // 用户名输入框的值
    };
  },

  methods: {
    // 登录
    handleLogin() {
      console.log("username", this.username);
      // 一些简单的非空校验
      if (!this.username) return alert("请输入用户名");

      // 与数据库匹配，获取到当前登录用户的信息
      const userInfo = users.find((item) => item.name === this.username);
      if (!userInfo) return alert("用户不存在");

      // 登录成功
      //  1. 将 userInfo 赋值给 this.userInfo
      this.userInfo = userInfo;
      //    为了让auth指令中能获取到当前登录的用户信息，将userInfo挂到全局 window 上
      window.userInfo = userInfo;
      //  2. 恭喜
      alert("登录成功");
    },
  },
};
</script>
